<template>
  <div v-if="detail">
    <button @click="$router.back()">back</button>
    <!-- PlayListPage {{ $route.query }} -->
    <img
      style="width: 100%"
      :src="`${detail.coverImgUrl}?imageView=1&type=webp&thumbnail=247x0`"
      alt=""
    />
    <h3>{{ detail.name }}</h3>

    <ul>
      <SongListItem
        v-for="item in detail.tracks"
        :key="item.id"
        :item="item"
        @update:currentSong="$emit('update:currentSong', $event)"
        :currentSong="currentSong"
        :playing="playing"
      />
    </ul>
  </div>
</template>

<script>
import SongListItem from "@/components/SongListItem.vue";
export default {
  components: {
    SongListItem,
  },
  props: ["currentSong", "playing"],
  data: function () {
    return {
      detail: null,
    };
  },
  created: function () {
    this.axios
      .get("/playlist/detail?id=" + this.$route.query.id)
      .then((res) => {
        this.detail = res.data.playlist;
      });
  },
};
</script>

<style>
</style>